<template>
  <div id="gridList">
    <div v-for="(item, index) in data" :key="index" class="gridList">
      <div class="head">
        <div style="display: inline-block">
          <span v-if="showImage">
            <Upload-Img
              style=""
              v-model="item.url"
              :fileSize="5"
              sizeUnit="MB"
              :limit="1"
              disabled
            >
            </Upload-Img>
          </span>
          <span v-else class="index">
            {{ index + 1 > 10 ? index + 1 : "0" + (index + 1) }}
          </span>
        </div>
        <!-- <slot name="image" :item="item"></slot> -->
        <span class="title">
          {{ item[prop.title] }}
        </span>
        <span style="float: right; margin-right: 16px" v-if="selection">
          <el-checkbox @change="setChecked($event, item)"></el-checkbox
        ></span>
      </div>
      <div class="item">
        <slot name="item" :item="item"></slot>
      </div>
      <br />
      <div class="button">
        <slot name="button" :item="item"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "GridList",
  components: {},
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    selection: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    // 字段映射
    prop: {
      type: Object,
      default: function () {
        return {
          title: "title",
          url: "url",
        };
      },
    },
    showImage: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      multipleSelection: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    setChecked(ifSelect, item) {
      if (ifSelect) {
        this.multipleSelection.push(item);
      } else {
        var index = this.multipleSelection.indexOf(item);
        if (index !== -1) {
          this.multipleSelection.splice(index, 1);
        }
      }
      this.$emit("change", this.multipleSelection);
    },
  },
};
</script>
<style scoped>
.gridList {
  border: solid 1px rgba(233, 233, 233, 1);
  border-radius: 6px;
  width: 18%;
  min-width: 282px;
  max-width: 400px;
  display: inline-block;
  margin-right: 16px;
  margin-bottom: 16px;
  padding-top: 16px;
}

.head {
  margin-left: 16px;
  height: 36px;
}
.index {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  line-height: 36px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--blue);
  color: rgba(255, 255, 255, 1);
}
.title {
  font-size: 16px;
  margin-top: 10px;
  margin-left: 16px;
}
.item {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  margin-left: 70px;
  line-height: 24px;
}
.button {
  border-top: solid 1px rgba(233, 233, 233, 1);
  background-color: rgba(247, 249, 250, 1);
  height: 44px;
  font-size: 14px;
}
</style>
<style>
#gridList .el-upload-list__item-thumbnail {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
#gridList .el-upload--picture-card {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
</style>
